<template>
  <div class="file-upload">
    <vue-file-upload url="upload.do" ref="vueFileUploader" :events="cbEvents" :request-options="reqopts" @onAdd="onAddItem" @change="uploadAll()">
      <!--<span slot="label">选择文件</span>-->
    </vue-file-upload>
    <!--<table>-->
      <!--<thead>-->
      <!--<tr>-->
        <!--<th>name</th>-->
        <!--<th>size</th>-->
        <!--<th>progress</th>-->
        <!--<th>status</th>-->
        <!--<th>action</th>-->
      <!--</tr>-->
      <!--</thead>-->
      <!--<tbody>-->
      <!--<tr v-for="file in files">-->
        <!--<td v-text="file.name"></td>-->
        <!--<td v-text="file.size"></td>-->
        <!--<td v-text="file.progress"></td>-->
        <!--<td v-text="onStatus(file)"></td>-->
        <!--<td>-->
          <!--<button type="button" @click="uploadItem(file)">上传</button>-->
        <!--</td>-->
      <!--</tr>-->
      <!--</tbody>-->
    <!--</table>-->
    <!--<button type="button" @click="uploadAll">上传所有文件-->
      <!--<button type="button" @click="clearAll">清空文件列表</button>-->
    <!--</button>-->
    <!--<button type="button" @click="uploadItem(file)">上传</button>-->
  </div>
</template>
<script>
  import VueFileUpload from 'vue-file-upload'

  import $ from 'jquery'

  export default {
    data () {
      return {
        files: [],
        // 回调函数绑定
        cbEvents: {
          onCompleteUpload: (file, response, status, header) => {
            console.log(file)
            console.log('finish upload;')
          }
        },
        // xhr请求附带参数
        reqopts: {
          formData: {
            tokens: 'tttttttttttttt'
          },
          responseType: 'json',
          withCredentials: false
        }
      }
    },
    mounted () {
      // 设置formData数据
      this.$refs.vueFileUploader.setFormDataItem('authorization', '123')

      $('.vue-file-upload').html('<input type="file" name="file">')

      var _this = this
      $('.vue-file-upload input').on('change', function () {
        console.log(1)
        console.log(_this)
        _this.uploadAll()
      })
    },
    methods: {
      onStatus (file) {
        if (file.isSuccess) {
          return '上传成功'
        } else if (file.isError) {
          return '上传失败'
        } else if (file.isUploading) {
          return '正在上传'
        } else {
          return '待上传'
        }
      },
      onAddItem (files) {
        console.log(files)
        this.files = files
      },
      uploadItem (file) {
        // 单个文件上传
        file.upload()
      },
      uploadAll () {
        // 上传所有文件
        this.$refs.vueFileUploader.uploadAll()
      },
      clearAll () {
        // 清空所有文件
        this.$refs.vueFileUploader.clearAll()
      }
    },
    components: {
      VueFileUpload
    }
  }
</script>
<style scoped>
  .file-upload {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
  }

  .vue-file-upload {
    width: 100%;
    height: 100%;
    display: block;
  }

  .vue-file-upload input {
    width: 100%;
    height: 100%;
    display: block;
  }
</style>
